<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image :src="globalConfig.appInfo.logo" mode="widthFix"></image>
		</view>
		<view class="login-btn">
			<button :disabled="!protocol" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<image mode="widthFix" src="https://nownc178.cq4oss.ctyunxs.cn/index/weixinLogo.png" />
				微信授权登录
			</button>
		</view>

		<view class="protocol text-center">
			<checkbox-group class="agreement_radio" @change="checkboxChange">
				<checkbox class="red round" value="1"></checkbox>
				<text>阅读并同意</text>
				<text class="text-red" @click="handlePrivacy">《隐私协议》</text>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			globalConfig: getApp().globalData.config,
			protocol: false
		};
	},
	methods: {
		checkboxChange(e) {
			console.log(e);
			if (e.detail.value == '1') {
				this.protocol = true;
			} else {
				this.protocol = false;
			}
		},
		tishi() {
			this.$modal.msg('此功能已关闭');
		},
		// 微信获取手机号
		getPhoneNumber(e) {
			if (e.detail.code) {
				this.$store
					.dispatch('Login', {
						code: e.detail.code,
						loginType: '2'
					})
					.then((res) => {
						console.log(res);
						if (res.data.init === '0') {
							this.$tab.navigateTo('/pages/mine/info/edit');
						} else {
							this.loginSuccess();
						}
					});
			}
		},
		// 登录成功后，处理函数
		loginSuccess(result) {
			// 设置用户信息
			this.$store.dispatch('GetInfo').then((res) => {
				this.$tab.reLaunch('/pages/index');
			});
		},
		// 隐私政策
		handlePrivacy() {
			this.$tab.navigateTo('/pages/privacy');
		}
	}
};
</script>

<style lang="scss">
@import '@/static/scss/icon.css';

page {
	background-color: #ffffff;
}

.normal-login-container {
	width: 100%;

	.login-btn {
		margin: 80rpx 75rpx;

		button {
			line-height: 3.3;
			font-size: 30rpx;
			color: #fff;
			background-color: #fc0204;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 40rpx;
				margin-right: 10rpx;
			}

			&[disabled] {
				background-color: #f9a7a7;
			}
		}
	}

	.logo-content {
		padding-top: 25%;

		image {
			width: 230rpx;
			border-radius: 4px;
		}
	}

	.protocol {
		width: 100%;
		color: #333;
		position: fixed;
		bottom: 40rpx;

		checkbox {
			transform: scale(0.7);
		}
	}
}
</style>
